<template>
  <div id="contract">
    <!-- 头部搜索框 -->
    <div class="top">
      <el-form :model="formData" label-position="top" type="flex" justify="center">
        <!-- 表单第一行 -->
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="合同编号">
              <el-input
                clearable
                size="large"
                v-model="formData.contractNo"
                placeholder="请输入"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户姓名">
              <el-input
                clearable
                size="large"
                v-model="formData.name"
                placeholder="请输入"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input
                clearable
                size="large"
                v-model="formData.phone"
                placeholder="请输入"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 表单第二行 -->
        <el-row :gutter="80">
          <el-col :span="8">
            <el-form-item label="购买学科">
              <el-select
                size="large"
                v-model="formData.subject"
                style="width: 300px"
                clearable
                placeholder="请输入"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :value="item.content"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买课程">
              <el-select
                size="large"
                v-model="formData.courseName"
                style="width: 300px"
                clearable
                placeholder="请输入"
              >
                <el-option v-for="item in courseList" :key="item.id" :value="item.content" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建日期">
              <el-date-picker
                clearable
                size="large"
                type="daterange"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD hh:mm:ss"
                v-model="formData.createTime"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width:200px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
        <el-row :span="6">
          <el-col>
            <el-form-item>
              <el-button
                round
                size="large"
                @click="Btnsearch"
                style="width: 80px; background-color: #05cc95; color: #fff"
              >
                搜索
              </el-button>
              <el-button round size="large" style="width: 80px" @click="resetBtn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 中间部分 -->
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="21" style="font-size: 14px"
          >已选
          <span style="color: #05cc95; font-weight: 700">{{ List.length }}&nbsp;</span>项</el-col
        >
        <el-col :span="2">
          <el-button
            type="danger"
            round
            class="button"
            style="width: 100px"
            size="large"
            @click="dialogFormVisible = true"
            >添加合同</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 底部表格 -->
    <div class="table">
      <el-table :data="List" style="border: 1px solid #f1f1f1" empty-text="暂无数据">
        <el-table-column align="center" label="序号" width="100px">
          <template v-slot="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="contractNo"
          width="100px"
          label="合同编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          width="100px"
          label="客户姓名"
        ></el-table-column>
        <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
        <el-table-column align="center" prop="courseName" label="购买学科"></el-table-column>
        <el-table-column align="center" prop="subject" label="购买课程"></el-table-column>
        <el-table-column width="200px"
          align="center"
          prop="createTime"
          label="创建时间"
          sortable
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <!-- <el-button type="text">预览</el-button> -->
            <el-button type="text" @click="$router.push(`/details/${row.id}`)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row justify="center">
        <el-col :span="24" class="pagination-col">
          <el-pagination
            :page-sizes="[10, 20, 30]"
            :current-page="formData.page"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="formData.total"
            :background="false"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-col>
      </el-row>
    </div>
  </div>
  <ContractDialog
    v-model.sycn="dialogFormVisible"
    @close="dialogFormVisible = $event"
  ></ContractDialog>
</template>
<script setup>
import ContractDialog from './components/ContractDialog.vue'
import { getContractList } from '@/api/contract.js'
import { cxTabelCourse } from '@/api/course.js'
import { ref, onMounted } from 'vue'
// 弹窗
const dialogFormVisible = ref(false)
// 声明表单绑定数据
const formData = ref({
  contractNo: '',
  name: '',
  phone: '',
  subject: '',
  courseName: '',
  createTime: '',
  size: 10,
  page: 1,
  total: 0
})
const List = ref([{}])
// 学科
const subjectList = ref([{}])
// 课程
const courseList = ref([{}])
// 获取合同列表
const getContractListApi = async () => {
  const { data, size, total } = await getContractList(formData.value)
  List.value = data
  formData.value.size = size
  formData.value.total = total
}
onMounted(() => {
  getContractListApi()
  getsubjectList()
  getcourseList()
})
// 获取购买学科列表
const getsubjectList = async () => {
  const { data } = await cxTabelCourse(2)
  subjectList.value = data
}
// 获取购买课程列表
const getcourseList = async () => {
  const { data } = await cxTabelCourse(19)
  courseList.value = data
}
// 搜索
const Btnsearch = async () => {
  formData.value.page = 1
  getContractListApi()
}
// 重置
const resetBtn = () => {
  formData.value = {
    size: 10,
    page: 1,
    total: 0
  }
  getContractListApi()
}
// 切换分页
const changePage = async (newPage) => {
  formData.value.page = newPage
  await getContractListApi()
}
// 切换分页显示数据量
const changeSize = async (newSize) => {
  formData.value.size = newSize
  formData.value.page = 1
  await getContractListApi()
}
</script>
<style lang="less" scoped>
#contract {
  height: 100vh;
  width: 100%;
}
.top {
  padding: 30px 20px 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  height: 250px;
}
.row {
  margin-top: 15px;
  margin-left: -40px;
}
.tab {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.tab.active {
  color: #05cc95;
  color: #ccc;
}
::v-deep .el-input__wrapper {
  background-color: #f5f5f5;
}
.highlight {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  height: 3px;
  width: 60px;
  border-radius: 5px;
  background-color: #05cc95;
}
// 中间样式
.center {
  height: 80px;
  line-height: 80px;
  padding-left: 30px;
}
/* 定义表头样式 */
::v-deep .el-table th {
  text-align: center;
  background-color: #eaf1ef; /* 设置表头颜色 */
  color: #666; /* 设置表头文字颜色 */
}
.pagination-col {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
</style>
